<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/detail.js"></script>
    <script>
        $(function () {
           /* $(".sibling-item .selected").click(function () {
                var pid = $(this).attr("proid");
                $.ajax({
                    url:"maindetail",
                    data:{
                        "pid":pid
                    },
                    type:"get",
                    dataType:"html",
                    async:true
                })
            });*/
        });
        function buy() {
            var pid = $(".sibling-item .selected").attr(proid);
            var webtype = $(".set-sale:eq(0) .selected").text();
            var color = $(".set-sale:eq(1) .selected").text();
            var memory = $(".set-sale:eq(2) .selected").text();
            var taocan = $(".set-package .selected").text();
            $.ajax({
                url:"allproduct",
                data:{
                    "pname":pname,
                    "color":color
                }
            })
        }
    </script>
</head>
<body>
<div class="detaild-right">
    <div class="detaild-right-hd">
        <h1>${sessionScope.tp.pname}</h1>
        <p class="mod-info">
            【限时6期免息】【低至1199元起】 骁龙675 | 后置4800万 | 前置2000万 | 独家定制水滴设计全面屏 | 4000mAh大容量电池 | 18W mCharge快充 | 吃鸡不卡 拍她更美
        </p>
    </div>
    <!--
        作者：1657064096@qq.com
        时间：2019-08-01
        描述：优惠活动
    -->
    <div class="detaild-right-sell">
        <div class="sell-price clearfix">
            <div class="mod-price">
                <small>¥</small>
                <span id="detailed-price" class="vm-price">${sessionScope.tp.price}</span>
            </div>
            <!--后台控制优惠活动？-->
            <!--app下单专享优惠活动-->
            <dl class="sell-app">
                <dt class="vm-entry">
                    <span>APP专享</span>
                </dt>
                <dd class="mod-app-tip" id="appTip">
                    APP下单省
                    <span id="vm-money">0</span>元
                </dd>
            </dl>
            <!--优惠券活动-->
            <dl class="sell-coupon">
                <dt class="vm-entry">
                    <span>优惠券</span>
                </dt>
                <dd id="couponTip">
                    <a class="vm-more">更多&nbsp;></a>
                </dd>
            </dl>
            <!--加购送优惠-->
            <dl class="sell-app" id="">
                <dt class="vm-entry">
                    <span>加价购</span>
                </dt>
                <dd class="mod-app-tip">
                    另加
                    <span id="vm-addMoney">0</span>元起即可换购超值商品&nbsp;
                    <a class="vm-more">立即加购&nbsp;></a>
                </dd>
            </dl>
        </div>
    </div>
    <!--
        作者：1657064096@qq.com
        时间：2019-08-01
        描述：配送服务
    -->
    <div class="detaild-service">
        <dl class="detaild-service-item clearfix">
            <dt class="vm-metatit">
                支
                <span class="s-space"></span>
                <span class="s-space"></span>
                持
            </dt>
            <dd class="mod-bd">
									<span>
										<a class="hand">
											<i class="icon-queding iconfont">

											</i>
											百城速达
										</a>
									</span>
                <span>
										<a class="hand">
											<i class="icon-queding iconfont">

											</i>
											顺丰发货
										</a>
									</span>
                <span>
										<a class="hand">
											<i class="icon-queding iconfont">

											</i>
											七天无理由退货
										</a>
									</span>
            </dd>
        </dl>
        <dl class="detaild-service-suda clearfix">
            <dt class="vm-metatit">
                配送服务
            </dt>
            <dd class="mod-site clearfix">
                <!--选择配送地址服务-->
                <div class="site-selector">
                    <div class="text">
                        <span>配送地</span>
                        <i class="iconfont" style="font-size: 10px;">

                        </i>
                    </div>
                    <div class="content">
                        <div class="stock-con">
                            <div class="m stock">
                                <div class="mt">
                                    <ul class="tab">
                                        <li style="display: list-item;" class="curr">
                                            <a>
                                                <em>请选择</em>
                                                <i></i>
                                            </a>
                                        </li>
                                        <li style="display: none;">
                                            <a>
                                                <em>请选择</em>
                                                <i></i>
                                            </a>
                                        </li>
                                        <li style="display: none;">
                                            <a>
                                                <em>请选择</em>
                                                <i></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <!--隐藏class加none-->
                                <div class="mc" id="site-province-item">
                                    <ul class="area-list">
                                    </ul>
                                </div>
                                <div class="mc" id="site-city-item" style="display: none;">
                                    <ul class="area-list">
                                    </ul>
                                </div>
                                <div class="mc" id="site-area-item" style="display: none;">
                                    <ul class="area-list">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="site-status">
                    <a class="vm-today hand">
                        <i class="iconfont icon-kuaidi">

                        </i>
                        次日达
                    </a>
                    <span class="ttttt">
											19:00 前下单并支付，预计明天（8月2日）送达
                        <script>
                            $(function () {
                                let curDate = new Date();
                                let time = new Date((curDate / 1000 + 86400) * 1000).toLocaleDateString();
                                if (curDate.getHours() > 19) {
                                    time = new Date((time / 1000 + 86400) * 1000).toLocaleDateString();
                                }
                                $(".ttttt").html("19:00 前下单并支付，预计明天（" + time + "）送达");
                            });
                        </script>
										</span>
                </div>
            </dd>
        </dl>
        <div class="detaild-service-provider clearfix">
								<span>
									本商品由 魅族 负责发货并提供售后服务
								</span>
            <a class="vm-kefu">
                <i class="iconfont icon-kefurexian"></i>
                <span>商城客服</span>
            </a>
        </div>
    </div>
    <!--
        作者：1657064096@qq.com
        时间：2019-08-01
        描述：手机所拥有的型号
    -->
    <div class="detaild-sibling">
        <dl class="sibling-item">
            <dt class="vm-metatit">
                型
                <span class="s-space"></span>
                <span class="s-space"></span>
                号
            </dt>
            <dd class="clearfix">
                <%--                <c:forEach items="${allproduct}" var = "p" >--%>
                <%--                    <a class="prop" proid="${p.pid}">${p.pname}</a>--%>
                <%--                </c:forEach>--%>
                <c:forEach items="${sessionScope.pros}" var="pro">
                    <a class="prop <c:if test='${pro.pname==sessionScope.tp.pname}'>selected</c:if>"
                       pid = "${pro.pid}">${pro.pname}</a>
                </c:forEach>
            </dd>
        </dl>
    </div>
    <div style="clear: both;"></div>
    <div class="detaild-set">
        <dl class="set-sale">
            <dt class="vm-metatit">
                网络类型
            </dt>
            <dd class="clearfix">
                <a class="prop selected">全网通公开版</a>
            </dd>
        </dl>
        <div style="clear: both;"></div>
        <dl class="set-sale">
            <dt class="vm-metatit">
                颜色分类
            </dt>
            <dd class="clearfix">
                <c:forEach items="${sessionScope.colors}" var="color">
                    <a class="prop <c:if test='${color.pid==sessionScope.tp.pid}'>selected</c:if>"
                       pid="${color.pid}" cid = "${color.cid}" >
                        <img src="${pageContext.request.contextPath}${color.path}" width="32px" height="32px"/>
                        ${color.color}</a>
                </c:forEach>
            </dd>
        </dl>
        <div style="clear: both;"></div>
        <dl class="set-sale">
            <dt class="vm-metatit">
                内存容量
            </dt>
            <dd class="clearfix">
                <c:forEach items="${sessionScope.roms}" var="rom">
                    <a class="prop <c:if test='${rom.pid==sessionScope.tp.pid}'>selected</c:if>" pid =
                            "${rom.pid}"  rid= "${rom.rid}">
                            ${rom.rsize}+
                            ${rom.msize}GB</a>
                </c:forEach>
            </dd>
            <script>
                $(function () {
                    $(".prop").click(function () {
                        let pid = $(this).attr("pid");

                        if (pid === undefined) {
                            return;
                        }

                        let tpid = ${sessionScope.tp.pid};
                        if (pid === "${sessionScope.tp.pid}") {
                            return;
                        }

                        location.href = "http://localhost:8080/maindetail.jsp?pid=" + pid;
                    });
                });
            </script>
        </dl>
        <dl class="set-package">
            <dt class="vm-metatit">
                选择套餐
            </dt>
            <dd class="package">
                <div class="package-tab clearfix">
                    <a class="prop selected">官方标配</a>
                    <a class="prop">
                        EP21套餐
                        <span class="vm-text-profits">
												省<em>30</em>元
											</span>
                    </a>
                    <a class="prop">
                        EP21套餐
                        <span class="vm-text-profits">
												省<em>30</em>元
											</span>
                    </a>
                </div>
                <!--套餐详情-->
                <div class="package-content none">
                    <div class="mod-bd"></div>
                </div>
            </dd>
        </dl>
    </div>
    <div style="clear: both;"></div>
    <!--购买数量-->
    <div class="detaild-buy">
        <dl class="quantity">
            <dt class="vm-metatit">
                数
                <span class="s-space"></span>
                <span class="s-space"></span>
                量
            </dt>
            <dd class="clearfix">
                <div class="mod-control">
                    <a title="减少" class="vm-minus disable">-</a>
                    <input type="text" value="1" id="count" />
                    <a title="增加" class="vm-plus">+</a>
                    <script>
                        $(function () {
                            let temp = $("#count");
                            $(".vm-minus").click(function () {
                                let c = temp.val();
                                if (c <= 1) {
                                    return;
                                }
                                temp.val(parseInt(c) - 1);

                            });
                            $(".vm-plus").click(function () {
                                let c = temp.val();
                                if (c >= 5) {
                                    return;
                                }
                                temp.val(parseInt(c) + 1);
                            });
                        });
                    </script>
                </div>
            </dd>
        </dl>
        <div class="buy-action">
            <a class="mr20 btn-lg btn-primary btn">
                立即购买
            </a>
            <a class="btn-lg btn btn-empty">
                加入购物车
            </a>
            <script>
                $(function () {
                    let count = $("#count").val();
                    let pid = ${sessionScope.tp.pid};
                    $(".btn-empty").click(function () {
                        $.ajax({
                            url: "/addcart",
                            type: "POST",
                            data: {
                                count: count,
                                pid: pid
                            }
                        });
                    });

                    $(".btn-primary").click(function () {
                        $.ajax({
                            url: "/addcart",
                            type: "GET",
                            async: false,
                            data: {
                                count: count,
                                pid: pid
                            }
                        }).done(function (data) {
                            location.href = "/Payment-page";
                        });

                    });
                });
            </script>
        </div>
    </div>
</div>
</body>
</html>
